<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>公共区域监控管理</title>
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/popup.css">
	<link rel="stylesheet" href="../css/skyblue/elements.css">
	<style>
		.search_img {
			position: absolute;
			right: 3%;
		}

		.two {
			width: 20%;
		}

		.four {
			width: 30%;
		}

		.three {
			width: 10%;
		}

		.show {
			visibility: visible !important;
		}
	</style>
</head>

<body>
	<br>

	<div id="vue-root" :class="theme">
		<div class="refresh button-primary" onclick="location.reload()">刷新</div>
		<input placeholder="请输入设备名称" class="search" v-model="search.device"
			style="max-width: 120px;height: 33px;position: absolute; right: 80px;">
		<img src="../image/search.png" height="35" width="35" class="search_img" @click="getData">
		<div class="table">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th>序号</th>
						<th class="two">安装位置</th>
						<th class="four">开放时间</th>
						<th class="three" v-if="able.edit">修改时段</th>
						<th class="three" v-if="able.edit">编辑</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(live,index) in list" :key="live.id">
						<td class="one">
							<input type="checkbox" class="check-box" v-model="live.checked">
						</td>
						<td><span v-text="index+1"></span></td>
						<td class="two" v-text="live.area"></td>
						<td class="four" v-html="format(live.livePeriods)"></td>
						<td class="three" v-if="able.edit">
							<button class="button-info-plain" @click="changeTime(live)">修改开放时段</button>
						</td>
						<td class="three" v-if="able.edit">
							<a :href="'live_address_item_public.html?id='+live.id">
								<img class="img" src="../image/edit.png" height="20" width="20"
									onmouseover="this.src='../image/edit_light.png'"
									onmouseout="this.src='../image/edit.png'">
							</a>

						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<br>
		<div class="delete button-danger" @click="batchDelete" v-if="able.del">批量删除</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>
		<!--遮罩层-->
		<div style="visibility: hidden" :class="{show:show}">
			<div class="model-table5">

				<div class="popup">
					<div class="popup-title">开放时间</div>
					<div class="popup-center">
						<div class="popup-box">
							<div class="popup-time" v-for="(livePeriod,index) in livePeriods" :key="index">
								<div class="popup-box-title">开放时间段
									<span @click="delItem(index)">移除</span>
								</div>
								<div class="start-time">
									<label class="layui-label">开始时间</label>
									<input class="layui-input" :id="'start'+index" v-model="livePeriod.startTime" />
								</div>
								<div class="over-time">
									<label class="layui-label">结束时间</label>
									<input class="layui-input" :id="'end'+index" v-model="livePeriod.endTime" />
								</div>
							</div>
						</div>
						<div class="layui-add" @click="addItem">+</div>
						<button class="sure" @click="submit">确定</button>
						<button class="back" @click="show=false">取消</button>
					</div>
				</div>
			</div>
		</div>

	</div>


	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="../lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>
		var app = new Vue(merge({

			data: {
				search: {},
				show: false,
				livePeriods: [],
				liveId: null,
				urls: {
					del: '/pc/live/del'
				}
			},
			created: function () {
				var schoolId = top_params().id;
				if (!schoolId) {
					alert('未知学校');
					throw '未知学校';
				}
				this.schoolId = schoolId;
				this.getData();
				abled('live', this);
			},
			computed: {
				theme() {
					return localStorage['theme']
				}
			},
			methods: {
				getData: function () {
					axios.get('/pc/livePeriod/list/' + this.schoolId, {
						params: {
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							type: 0,
							device: this.device
						}
					}).then(this.setData);
				},
				changeTime: function (live) {
					this.livePeriods = copy(live.livePeriods);
					this.liveId = live.id;
					this.show = true;
					this.laydate();
				},
				format: function (livePeriods) {
					return livePeriods.map(function (it) {
						return '每天 : ' + it.startTime + '-' + it.endTime;
					}).join('<br>');
				},
				delItem: function (index) {
					this.livePeriods.splice(index, 1);
				},
				addItem: function () {
					this.livePeriods.push({
						startTime: '00:00',
						endTime: '00:00',
					});
					this.laydate();
				},
				submit: function () {

					if (this.livePeriods) {
						axios.post('/pc/livePeriod/update/' + this.liveId, this.livePeriods).then(
							function () {
								this.getData();
								this.show = false;
								alert('成功');
							}.bind(this));
					}
				},
				laydate: function () {
					var _this = this;
					this.$nextTick(function () {
						for (var i = 0; i < _this.livePeriods.length; i++) {
							laydate.render({
								i: i,
								elem: '#start' + i,
								type: 'time',
								format: 'HH:mm',
								done: function (value, date, endDate) {
									_this.livePeriods[this.i].startTime = value;
								}
							});
							laydate.render({
								i: i,
								elem: '#end' + i,
								type: 'time',
								format: 'HH:mm',
								done: function (value, date, endDate) {
									_this.livePeriods[this.i].endTime = value;
								}
							});
						}
					});
				}
			}
		}));
	</script>
</body>

</html>